<template>
  <div class="customer-service-page">
    <Header />

    <div class="page-content">
      <!-- 面包屑导航 -->
      <div class="page-nav">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/account' }">
              <i class="fas fa-chevron-left"></i> {{ $t('返回账户') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('客户服务') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 主要内容 -->
      <div class="main-card">
        <h1 class="page-title">{{ $t('联系客服') }}</h1>

        <div class="service-grid">
          <!-- 在线客服 -->
          <a
            :href="telegramLink724"
            target="_blank"
            class="service-card"
          >
            <div class="service-icon whatsapp">
<!--              <i class="fab fa-whatsapp"></i>-->
          <i class="fas fa-headset"></i>
              <!-- <img class="fab fa-whatsapp" src="@/assets/images/account/WhatsApp.svg.png" alt="" /> -->
            </div>
            <div class="service-info">
              <h3>{{ $t('在线客服') }}</h3>
              <p>{{ $t('7x24小时在线为您服务') }}</p>
              <div class="service-status">
                <span class="status-text">{{ $t('立即联系') }}</span>
                <i class="fas fa-external-link-alt"></i>
              </div>
            </div>
          </a>

          <!-- <div class="service-card" @click="handleOnlineService">
            <div class="service-icon">
              <i class="fas fa-headset"></i>
            </div>
            <div class="service-info">
              <h3>{{ $t('在线客服') }}</h3>
              <p>{{ $t('7x24小时在线为您服务') }}</p>
              <div class="service-status">
                <span class="status-dot online"></span>
                <span class="status-text">{{ $t('在线') }}</span>
              </div>
            </div>
          </div> -->

          <!-- Telegram -->
<!--          <a-->
<!--            :href="telegramLink"-->
<!--            target="_blank"-->
<!--            class="service-card"-->
<!--          >-->
<!--            <div class="service-icon telegram">-->
<!--              <i class="fab fa-telegram"></i>-->
<!--            </div>-->
<!--            <div class="service-info">-->
<!--              <h3>Telegram</h3>-->
<!--              <p>{{ telegramUsername }}</p>-->
<!--              <div class="service-status">-->
<!--                <span class="status-text">{{ $t('立即联系') }}</span>-->
<!--                <i class="fas fa-external-link-alt"></i>-->
<!--              </div>-->
<!--            </div>-->
<!--          </a>-->

          <!-- WhatsApp(whatsappLink) -->
          <a
            :href="telegramLink"
            target="_blank"
            class="service-card"
          >
            <div class="service-icon whatsapp">
<!--              <i class="fab fa-whatsapp"></i>-->
              <img class="fab fa-whatsapp" src="@/assets/images/account/WhatsApp.svg.png" alt="" />
            </div>
            <div class="service-info">
              <h3>WhatsApp</h3>
<!--              <p>{{ whatsappNumber }}</p>-->
              <div class="service-status">
                <span class="status-text">{{ $t('立即联系') }}</span>
                <i class="fas fa-external-link-alt"></i>
              </div>
            </div>
          </a>
        </div>

        <!-- 常见问题 -->
<!--        <div class="faq-section">-->
<!--          <h2>{{ $t('常见问题') }}</h2>-->
<!--          <el-collapse>-->
<!--            <el-collapse-item-->
<!--              v-for="faq in faqs"-->
<!--              :key="faq.id"-->
<!--              :title="faq.question"-->
<!--            >-->
<!--              {{ faq.answer }}-->
<!--            </el-collapse-item>-->
<!--          </el-collapse>-->
<!--        </div>-->
      </div>
    </div>

    <!-- 在线客服聊天窗口 -->
    <!-- <el-dialog
      v-model="showChatDialog"
      :title="$t('在线客服')"
      width="340px"
      custom-class="chat-dialog"
      :close-on-click-modal="false"
    >
      <div class="chat-container">
        <div class="chat-messages" ref="chatMessagesRef">
          <div
            v-for="msg in chatMessages"
            :key="msg.id"
            :class="['message', msg.type]"
          >
            <div class="message-content">{{ msg.content }}</div>
            <div class="message-time">{{ msg.time }}</div>
          </div>
        </div>

        <div class="chat-input">
          <el-input
            v-model="messageInput"
            :placeholder="$t('请输入消息...')"
            @keyup.enter="sendMessage"
          >
            <template #append>
              <el-button @click="sendMessage">{{ $t('发送') }}</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </el-dialog> -->

    <Footer />
  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, nextTick, computed} from 'vue'
import Footer from '@/components/Footer.vue'
import { ApiConfig } from "@/api/common";
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const telegramUsername = computed(() => {
  const name = telegramLink.value ? telegramLink.value.split('/').pop() : ''
  return name ? '@' + name : ''
})

// 联系方式配置
const telegramLink =  ref('')
const telegramLink724 =  ref('')
const whatsappNumber = '+1 234 567 8900'
const whatsappLink = `https://wa.me/${whatsappNumber.replace(/\D/g, '')}`

// 常见问题列表
const faqs = [
  {
    id: 1,
    question: '如何修改订单信息？',
    answer: '您可以在"我的订单"中找到需要修改的订单，点击"订单详情"进行修改。请注意，订单发货后将无法修改订单信息。'
  },
  {
    id: 2,
    question: '支付方式有哪些？',
    answer: '我们支持多种支付方式，包括钱包支付、支付宝、微信支付等。您可以在结算时选择最适合的支付方式。'
  },
  {
    id: 3,
    question: '如何申请退款？',
    answer: '您可以在订单详情页面申请退款。根据商品状态的不同，退款处理时间可能有所差异。我们会在收到退款申请后尽快处理。'
  }
]

// 聊天相关
const showChatDialog = ref(false)
const messageInput = ref('')
const chatMessagesRef = ref<HTMLElement>()
const chatMessages = ref([
  {
    id: 1,
    type: 'system',
    content: '客服已接入，请问有什么可以帮您？',
    time: '10:00'
  }
])

// 处理在线客服点击
const handleOnlineService = () => {
  showChatDialog.value = true
}

// 发送消息
const sendMessage = async () => {
  if (!messageInput.value.trim()) return

  // 添加用户消息
  chatMessages.value.push({
    id: Date.now(),
    type: 'user',
    content: messageInput.value,
    time: new Date().toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit'
    })
  })

  messageInput.value = ''

  // 滚动到底部
  await nextTick()
  if (chatMessagesRef.value) {
    chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight
  }

  // 模拟客服回复
  setTimeout(() => {
    chatMessages.value.push({
      id: Date.now(),
      type: 'service',
      content: t('您好，请问有什么可以帮您？'),
      time: new Date().toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit'
      })
    })
  }, 1000)
}

onMounted(() => {
  ApiConfig({
    key: 'CUSTOMER_SETTING'
  }).then(res => {
    telegramLink.value = res.data.tgHref
    telegramLink724.value = res.data.href
    
  })
})

</script>

<style lang="scss" scoped>
.customer-service-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-content {
  padding: 32px 24px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.page-nav {
  margin-bottom: 24px;

  .breadcrumb {
    :deep(.el-breadcrumb__item) {
      .el-breadcrumb__inner {
        color: #565656;
        font-weight: normal;
        font-size: 14px;

        &:hover {
          color: #c45500;
        }

        i {
          margin-right: 4px;
          font-size: 12px;
        }
      }
    }
  }
}

.main-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  padding: 32px;
}

.page-title {
  font-size: 24px;
  color: #111;
  font-weight: 500;
  margin-bottom: 32px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.service-card {
  border: 1px solid #d5d9d9;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;

  &:hover {
    border-color: #ff9900;
    transform: translateY(-2px);
  }

  .service-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #232f3e;

    &.telegram {
      color: #0088cc;
    }

    &.whatsapp {
      color: #25D366;
    }
    img{
      width: 33px;
      height: 33px;
    }
  }

  .service-info {
    flex: 1;

    h3 {
      font-size: 16px;
      color: #111;
      margin: 0 0 4px;
    }

    p {
      font-size: 14px;
      color: #666;
      margin: 0 0 8px;
    }

    .service-status {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: #666;

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;

        &.online {
          background: #52c41a;
        }
      }

      i {
        font-size: 12px;
      }
    }
  }
}

.faq-section {
  h2 {
    font-size: 20px;
    color: #111;
    margin: 0 0 16px;
  }

  :deep(.el-collapse) {
    border: none;

    .el-collapse-item__header {
      font-size: 15px;
      color: #232f3e;
      padding: 16px 0;
    }

    .el-collapse-item__content {
      color: #666;
      font-size: 14px;
      line-height: 1.6;
      padding: 0 0 16px;
    }
  }
}

.chat-dialog {
  :deep(.el-dialog__body) {
    padding: 0;
  }
}

.chat-container {
  height: 500px;
  display: flex;
  flex-direction: column;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;

  .message {
    margin-bottom: 16px;
    max-width: 80%;

    &.system {
      margin: 0 auto 16px;
      text-align: center;

      .message-content {
        background: #f5f5f5;
        color: #666;
        display: inline-block;
      }
    }

    &.user {
      margin-left: auto;

      .message-content {
        background: #ff9900;
        color: white;
      }
    }

    &.service {
      margin-right: auto;

      .message-content {
        background: #f0f2f5;
      }
    }

    .message-content {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 14px;
      line-height: 1.4;
    }

    .message-time {
      font-size: 12px;
      color: #999;
      margin-top: 4px;
      text-align: right;
    }
  }
}

.chat-input {
  padding: 16px;
  border-top: 1px solid #eee;
}

@media (max-width: 768px) {
  .page-content {
    padding: 16px;
  }

  .main-card {
    padding: 24px 16px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>
